/**
 * Element Plus 主题覆盖
 * 确保所有 Element Plus 组件都能正确应用深色/浅色主题
 */

// 全局 Element Plus 变量覆盖
:root {
  // 基础颜色
  --el-color-primary: #409eff;
  --el-color-primary-light-3: #79bbff;
  --el-color-primary-light-5: #a0cfff;
  --el-color-primary-light-7: #c6e2ff;
  --el-color-primary-light-8: #d9ecff;
  --el-color-primary-light-9: #ecf5ff;
  --el-color-primary-dark-2: #337ecc;
  
  --el-color-success: #67c23a;
  --el-color-warning: #e6a23c;
  --el-color-danger: #f56c6c;
  --el-color-error: #f56c6c;
  --el-color-info: #909399;
  
  // 文本颜色
  --el-text-color-primary: #303133;
  --el-text-color-regular: #606266;
  --el-text-color-secondary: #909399;
  --el-text-color-placeholder: #a8abb2;
  --el-text-color-disabled: #c0c4cc;
  
  // 背景颜色
  --el-bg-color: #ffffff;
  --el-bg-color-page: #f2f3f5;
  --el-bg-color-overlay: #ffffff;
  
  // 边框颜色
  --el-border-color: #dcdfe6;
  --el-border-color-light: #e4e7ed;
  --el-border-color-lighter: #ebeef5;
  --el-border-color-extra-light: #f2f6fc;
  --el-border-color-dark: #d4d7de;
  --el-border-color-darker: #cdd0d6;
  
  // 填充颜色
  --el-fill-color: #f0f2f5;
  --el-fill-color-light: #f5f7fa;
  --el-fill-color-lighter: #fafafa;
  --el-fill-color-extra-light: #fafcff;
  --el-fill-color-dark: #ebedf0;
  --el-fill-color-darker: #e6e8eb;
  --el-fill-color-blank: #ffffff;
  
  // 阴影
  --el-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.08);
  --el-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, 0.12);
  --el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, 0.08), 0px 12px 32px rgba(0, 0, 0, 0.12), 0px 8px 16px -8px rgba(0, 0, 0, 0.16);
  
  // 遮罩
  --el-overlay-color: rgba(0, 0, 0, 0.8);
  --el-overlay-color-light: rgba(0, 0, 0, 0.7);
  --el-overlay-color-lighter: rgba(0, 0, 0, 0.5);
}

// 深色主题变量覆盖
.dark {
  // 基础颜色 - 使用指定的深色主题颜色
  --el-color-primary: #409eff;
  --el-color-primary-light-3: #79bbff;
  --el-color-primary-light-5: #a0cfff;
  --el-color-primary-light-7: #c6e2ff;
  --el-color-primary-light-8: #d9ecff;
  --el-color-primary-light-9: #ecf5ff;
  --el-color-primary-dark-2: #337ecc;
  
  --el-color-success: #67c23a;
  --el-color-warning: #c67915;  // 指定的辅助颜色1
  --el-color-danger: #c35c5d;   // 指定的辅助颜色2
  --el-color-error: #7c191e;    // 指定的辅助颜色3
  --el-color-info: #909399;
  
  // 文本颜色 - 深色主题
  --el-text-color-primary: #ffffff;
  --el-text-color-regular: #e5e5e5;
  --el-text-color-secondary: #b3b3b3;
  --el-text-color-placeholder: #8c8c8c;
  --el-text-color-disabled: #666666;
  
  // 背景颜色 - 深色主题，统一使用 #2c2f3b
  --el-bg-color: #2c2f3b;
  --el-bg-color-page: #242732;
  --el-bg-color-overlay: #2c2f3b;
  
  // 边框颜色 - 深色主题，基于 #2c2f3b
  --el-border-color: #4a4e5f;
  --el-border-color-light: #525670;
  --el-border-color-lighter: #5a5e81;
  --el-border-color-extra-light: #626692;
  --el-border-color-dark: #42464e;
  --el-border-color-darker: #3a3e4d;
  
  // 填充颜色 - 深色主题，基于 #2c2f3b
  --el-fill-color: #363a4b;
  --el-fill-color-light: #3e4253;
  --el-fill-color-lighter: #464a5b;
  --el-fill-color-extra-light: #4e5263;
  --el-fill-color-dark: #2e3243;
  --el-fill-color-darker: #262a3b;
  --el-fill-color-blank: #2c2f3b;
  
  // 阴影 - 深色主题
  --el-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.36), 0px 8px 20px rgba(0, 0, 0, 0.72);
  --el-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, 0.72);
  --el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, 0.72), 0px 12px 32px rgba(0, 0, 0, 0.84), 0px 8px 16px -8px rgba(0, 0, 0, 0.96);
  
  // 遮罩 - 深色主题
  --el-overlay-color: rgba(44, 47, 59, 0.9);
  --el-overlay-color-light: rgba(44, 47, 59, 0.8);
  --el-overlay-color-lighter: rgba(44, 47, 59, 0.6);
}

// 组件特定样式覆盖
.el-popper {
  background: var(--el-bg-color) !important;
  border: 1px solid var(--el-border-color) !important;
  box-shadow: var(--el-box-shadow-light) !important;
  
  .el-popper__arrow::before {
    background: var(--el-bg-color) !important;
    border: 1px solid var(--el-border-color) !important;
  }
}

.el-dropdown-menu {
  background: var(--el-bg-color) !important;
  border: 1px solid var(--el-border-color) !important;
  box-shadow: var(--el-box-shadow-light) !important;
  
  .el-dropdown-menu__item {
    color: var(--el-text-color-regular) !important;
    
    &:hover {
      background: var(--el-fill-color-light) !important;
      color: var(--el-text-color-primary) !important;
    }
  }
}

.el-select-dropdown {
  background: var(--el-bg-color) !important;
  border: 1px solid var(--el-border-color) !important;
  box-shadow: var(--el-box-shadow-light) !important;
  
  .el-select-dropdown__item {
    color: var(--el-text-color-regular) !important;
    
    &:hover {
      background: var(--el-fill-color-light) !important;
    }
    
    &.is-selected {
      background: var(--el-color-primary) !important;
      color: #ffffff !important;
    }
  }
}

.el-tooltip__popper {
  background: var(--el-bg-color) !important;
  border: 1px solid var(--el-border-color) !important;
  color: var(--el-text-color-primary) !important;
  
  .el-tooltip__arrow::before {
    background: var(--el-bg-color) !important;
    border: 1px solid var(--el-border-color) !important;
  }
}

.el-date-picker {
  background: var(--el-bg-color) !important;
  border: 1px solid var(--el-border-color) !important;
  box-shadow: var(--el-box-shadow-light) !important;
  
  .el-date-picker__header {
    border-bottom: 1px solid var(--el-border-color-light) !important;
  }
  
  .el-date-table td {
    color: var(--el-text-color-regular) !important;
    
    &:hover {
      background: var(--el-fill-color-light) !important;
    }
    
    &.is-selected {
      background: var(--el-color-primary) !important;
      color: #ffffff !important;
    }
  }
}

.el-time-picker {
  background: var(--el-bg-color) !important;
  border: 1px solid var(--el-border-color) !important;
  box-shadow: var(--el-box-shadow-light) !important;
}

.el-cascader-panel {
  background: var(--el-bg-color) !important;
  border: 1px solid var(--el-border-color) !important;
  
  .el-cascader-node {
    color: var(--el-text-color-regular) !important;
    
    &:hover {
      background: var(--el-fill-color-light) !important;
    }
    
    &.is-active {
      background: var(--el-color-primary) !important;
      color: #ffffff !important;
    }
  }
}

// 确保所有弹出层都使用正确的主题
.el-overlay {
  background: var(--el-overlay-color) !important;
}

// Loading 遮罩
.el-loading-mask {
  background: var(--el-overlay-color-lighter) !important;
  
  .el-loading-spinner {
    .el-loading-text {
      color: var(--el-text-color-primary) !important;
    }
  }
}

// 确保所有图标都使用正确的颜色
.el-icon {
  color: inherit;
}

// 滚动条主题适配
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--el-fill-color-lighter);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: var(--el-border-color-dark);
  border-radius: 3px;
  
  &:hover {
    background: var(--el-border-color-darker);
  }
}

// 深色模式下的滚动条
.dark {
  ::-webkit-scrollbar-track {
    background: var(--el-fill-color-dark);
  }
  
  ::-webkit-scrollbar-thumb {
    background: var(--el-border-color-light);
    
    &:hover {
      background: var(--el-border-color);
    }
  }
}
